<template>
	<view class="team-members-container">
		<!-- 团队统计 -->
		<view class="team-stats-card">
			<view class="stats-header">
				<text class="stats-title">我的团队</text>
				<text class="stats-total">共 {{ teamStats.team_usernum }} 人</text>
			</view>
			<view class="stats-grid">
				<view class="stat-item">
					<text class="stat-number">{{ teamStats.direct_usernum }}</text>
					<text class="stat-label">直推成员</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ teamStats.team_salenum }}</text>
					<text class="stat-label">团队销量</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ teamStats.team_money }}</text>
					<text class="stat-label">团队销售额</text>
				</view>
			</view>
		</view>

		<!-- 团队树形结构 -->
		<view class="team-tree-card">
			<view class="tree-header">
				<text class="tree-title">团队结构</text>
				<view class="tree-actions">
					<button class="action-btn" @click="expandAll">全部展开</button>
					<button class="action-btn" @click="collapseAll">全部收起</button>
				</view>
			</view>

			<view class="tree-container">
				<view class="tree-node" v-for="(member, index) in teamMembers" :key="member.id">
					<view class="member-node" :style="{ marginLeft: '0rpx' }">
						<view class="member-item">
							<view class="member-expand" @click="toggleExpand(member.id)"
								v-if="member.children && member.children.length > 0">
								<text class="expand-icon" :class="{ expanded: member.isExpanded }">▶</text>
							</view>
							<view class="member-expand placeholder" v-else></view>

							<view class="member-avatar">
								<image v-if="member.avatar_url" :src="$tools.buildUrl(member.avatar_url)"
									class="avatar-image" mode="aspectFill" />
								<view v-else class="avatar-placeholder">
									<text class="avatar-text">{{ member.realname.charAt(0) }}</text>
								</view>
							</view>

							<view class="member-info">
								<view class="member-header">
									<text class="member-name">{{ member.realname }}</text>
									<view class="member-level" :class="'level-'+getLevelClass(member.user_level_sort)">
										<text class="level-text">{{ member.user_level_desc }}</text>
									</view>
								</view>
								<text class="member-join-time">{{ member.join_date }} 加入</text>
								<view class="member-stats">
									<text class="stat-text">销售额: {{ member.direct_money }}</text>
									<text class="stat-text">销量: {{ member.direct_salenum }}</text>
									<text class="stat-text">团队: {{ member.team_usernum }}人</text>
								</view>
							</view>
						</view>

						<!-- 递归显示子成员 -->
						<view v-if="member.isExpanded && member.children && member.children.length > 0">
							<view v-for="child in member.children" :key="child.id" class="member-node"
								:style="{ marginLeft: '20rpx' }">
								<view class="member-item">
									<view class="member-expand" @click="toggleExpand(child.id)"
										v-if="child.children && child.children.length > 0">
										<text class="expand-icon" :class="{ expanded: child.isExpanded }">▶</text>
									</view>
									<view class="member-expand placeholder" v-else></view>

									<view class="member-avatar">
										<image v-if="child.avatar_url" :src="$tools.buildUrl(child.avatar_url)"
											class="avatar-image" mode="aspectFill" />
										<view v-else class="avatar-placeholder">
											<text class="avatar-text">{{ child.realname.charAt(0) }}</text>
										</view>
									</view>

									<view class="member-info">
										<view class="member-header">
											<text class="member-name">{{ child.realname }}</text>
											<view class="member-level"
												:class="'level-'+getLevelClass(child.user_level_sort)">
												<text class="level-text">{{ child.user_level_desc }}</text>
											</view>
										</view>
										<text class="member-join-time">{{ child.join_date }} 加入</text>
										<view class="member-stats">
											<text class="stat-text">销售额: {{ child.direct_money }}</text>
											<text class="stat-text">销量: {{ child.direct_salenum }}</text>
											<text class="stat-text">团队: {{ child.team_usernum }}人</text>
										</view>
									</view>
								</view>

								<!-- 第三级成员 -->
								<view v-if="child.isExpanded && child.children && child.children.length > 0">
									<view v-for="grandChild in child.children" :key="grandChild.id" class="member-node"
										:style="{ marginLeft: '30rpx' }">
										<view class="member-item">
											<view class="member-expand" @click="toggleExpand(grandChild.id)"
												v-if="grandChild.children && grandChild.children.length > 0">
												<text class="expand-icon"
													:class="{ expanded: grandChild.isExpanded }">▶</text>
											</view>
											<view class="member-expand placeholder" v-else></view>

											<view class="member-avatar">
												<image v-if="grandChild.avatar_url"
													:src="$tools.buildUrl(grandChild.avatar_url)" class="avatar-image"
													mode="aspectFill" />
												<view v-else class="avatar-placeholder">
													<text class="avatar-text">{{ grandChild.realname.charAt(0) }}</text>
												</view>
											</view>

											<view class="member-info">
												<view class="member-header">
													<text class="member-name">{{ grandChild.realname }}</text>
													<view class="member-level"
														:class="'level-'+getLevelClass(grandChild.user_level_sort)">
														<text class="level-text">{{ grandChild.user_level_desc }}</text>
													</view>
												</view>
												<text class="member-join-time">{{ grandChild.join_date }} 加入</text>
												<view class="member-stats">
													<text class="stat-text">销售额: {{ grandChild.direct_money }}</text>
													<text class="stat-text">销量: {{ grandChild.direct_salenum }}</text>
													<text class="stat-text">团队: {{ grandChild.team_usernum }}人</text>
												</view>
											</view>
										</view>

										<!-- 第四级成员 -->
										<view
											v-if="grandChild.isExpanded && grandChild.children && grandChild.children.length > 0">
											<view v-for="greatGrandChild in grandChild.children"
												:key="greatGrandChild.id" class="member-node"
												:style="{ marginLeft: '40rpx' }">
												<view class="member-item">
													<view class="member-expand"
														@click="toggleExpand(greatGrandChild.id)"
														v-if="greatGrandChild.children && greatGrandChild.children.length > 0">
														<text class="expand-icon"
															:class="{ expanded: greatGrandChild.isExpanded }">▶</text>
													</view>
													<view class="member-expand placeholder" v-else></view>

													<view class="member-avatar">
														<image v-if="greatGrandChild.avatar_url"
															:src="$tools.buildUrl(greatGrandChild.avatar_url)"
															class="avatar-image" mode="aspectFill" />
														<view v-else class="avatar-placeholder">
															<text
																class="avatar-text">{{ greatGrandChild.realname.charAt(0) }}</text>
														</view>
													</view>

													<view class="member-info">
														<view class="member-header">
															<text
																class="member-name">{{ greatGrandChild.realname }}</text>
															<view class="member-level"
																:class="'level-'+getLevelClass(greatGrandChild.user_level_sort)">
																<text
																	class="level-text">{{ greatGrandChild.user_level_desc }}</text>
															</view>
														</view>
														<text class="member-join-time">{{ greatGrandChild.join_date }}
															加入</text>
														<view class="member-stats">
															<text class="stat-text">销售额:
																{{ greatGrandChild.direct_money }}</text>
															<text class="stat-text">销量:
																{{ greatGrandChild.direct_salenum }}</text>
															<text class="stat-text">团队:
																{{ greatGrandChild.team_usernum }}人</text>
														</view>
													</view>
												</view>

												<!-- 第五级成员 -->
												<view
													v-if="greatGrandChild.isExpanded && greatGrandChild.children && greatGrandChild.children.length > 0">
													<view v-for="greatGreatGrandChild in greatGrandChild.children"
														:key="greatGreatGrandChild.id" class="member-node"
														:style="{ marginLeft: '50rpx' }">
														<view class="member-item">
															<view class="member-expand"
																@click="toggleExpand(greatGreatGrandChild.id)"
																v-if="greatGreatGrandChild.children && greatGreatGrandChild.children.length > 0">
																<text class="expand-icon"
																	:class="{ expanded: greatGreatGrandChild.isExpanded }">▶</text>
															</view>
															<view class="member-expand placeholder" v-else></view>

															<view class="member-avatar">
																<image v-if="greatGreatGrandChild.avatar_url"
																	:src="$tools.buildUrl(greatGreatGrandChild.avatar_url)"
																	class="avatar-image" mode="aspectFill" />
																<view v-else class="avatar-placeholder">
																	<text
																		class="avatar-text">{{ greatGreatGrandChild.realname.charAt(0) }}</text>
																</view>
															</view>

															<view class="member-info">
																<view class="member-header">
																	<text
																		class="member-name">{{ greatGreatGrandChild.realname }}</text>
																	<view class="member-level"
																		:class="'level-'+getLevelClass(greatGreatGrandChild.user_level_sort)">
																		<text
																			class="level-text">{{ greatGreatGrandChild.user_level_desc }}</text>
																	</view>
																</view>
																<text
																	class="member-join-time">{{ greatGreatGrandChild.join_date }}
																	加入</text>
																<view class="member-stats">
																	<text class="stat-text">销售额:
																		{{ greatGreatGrandChild.direct_money }}</text>
																	<text class="stat-text">销量:
																		{{ greatGreatGrandChild.direct_salenum }}</text>
																	<text class="stat-text">团队:
																		{{ greatGreatGrandChild.team_usernum }}人</text>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 团队统计
				teamStats: {
					user_level_sort: 0,
					user_level_desc: '初级分销员',
					direct_usernum: 0,
					team_usernum: 0,
					direct_salenum: 0,
					team_salenum: 0,
					direct_money: 0.00,
					team_money: 0.00
				},
				// 团队成员数据（树形结构）
				teamMembers: []
			}
		},
		computed: {

		},
		onLoad(options) {
			this.loadUserExtInfo()
			this.loadMemberList()
		},
		methods: {
			// 加载分销信息（团队统计）
			loadUserExtInfo() {
				this.productList = []
				this.$api.user.GetUserExtInfo4().then(res => {
					if (res.data.userLevel && res.data.userLevel.id > 0) {
						this.teamStats = res.data.userLevel
					}
				})
			},

			// 加载成员列表
			loadMemberList() {
				this.productList = []
				this.$api.fenxiao.GetTeamMembers().then(res => {
					this.teamMembers = res.data
				})
			},

			// 切换展开状态
			toggleExpand(memberId) {
				this.toggleMemberExpand(this.teamMembers, memberId)
			},

			// 递归切换成员展开状态
			toggleMemberExpand(members, memberId) {
				members.forEach(member => {
					if (member.id === memberId) {
						member.isExpanded = !member.isExpanded
					} else if (member.children && member.children.length > 0) {
						this.toggleMemberExpand(member.children, memberId)
					}
				})
			},

			// 全部展开
			expandAll() {
				this.setAllExpanded(this.teamMembers, true)
			},

			// 全部收起
			collapseAll() {
				this.setAllExpanded(this.teamMembers, false)
			},

			// 递归设置展开状态
			setAllExpanded(members, expanded) {
				members.forEach(member => {
					if (member.children && member.children.length > 0) {
						member.isExpanded = expanded
						this.setAllExpanded(member.children, expanded)
					}
				})
			},
			// 获取等级样式
			getLevelClass(sort) {
				const levelMap = {
					5: 'a',
					4: 'b',
					3: 'c',
					2: 'd',
					1: 'e'
				};
				return levelMap[sort] || 'e'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-members-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 团队统计卡片 */
	.team-stats-card {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: white;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.stats-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.stats-total {
		font-size: 24rpx;
		opacity: 0.9;
	}

	.stats-grid {
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		opacity: 0.8;
	}

	/* 团队树形卡片 */
	.team-tree-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.tree-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.tree-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.tree-actions {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		background-color: #52a58a;
		color: white;
		border: none;
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		font-size: 24rpx;
	}

	/* 树形节点 */
	.tree-container {
		margin-top: 20rpx;
	}

	.member-node {
		margin-bottom: 20rpx;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		border-left: 4rpx solid #52a58a;
	}

	.member-expand {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.member-expand.placeholder {
		visibility: hidden;
	}

	.expand-icon {
		font-size: 20rpx;
		color: #666;
		transition: transform 0.3s ease;
	}

	.expand-icon.expanded {
		transform: rotate(90deg);
	}

	.member-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.avatar-placeholder {
		width: 100%;
		height: 100%;
		background-color: #52a58a;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-text {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	.member-info {
		flex: 1;
	}

	.member-header {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.member-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
	}

	.member-level {
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-size: 20rpx;
		color: white;
	}

	.level-a {
		background-color: #52a58a;
	}

	.level-b {
		background-color: #6c757d;
	}

	.level-c {
		background-color: #ffc107;
		color: #333;
	}

	.level-d {
		background-color: #dc3545;
	}

	.level-e {
		background-color: #6f42c1;
	}

	.level-text {
		font-size: 20rpx;
	}

	.member-join-time {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	.member-stats {
		display: flex;
		gap: 20rpx;
	}

	.stat-text {
		font-size: 22rpx;
		color: #666;
	}
</style>